Web world 

A short introduction to website world. 
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Web Site Design 


What is a web site? 

A website is an address (location) on the World Wide Web that 
contains your web pages. Basically, a website is your personal online 
communications connection to the rest of the world. 

A website is totally different from any other type of publishing, 
advertising or communications media. 

e Design Process 

esigning for the web requires the relevant content of a brochure or 
magazine, the colorful look of high-quality print, and the attention- 
grabbing impact of television advertising. Plus it should offer a valuable 
product and/or information, be updated frequently and stay current with 
changing technology 

A Web Site is never done 
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Once you have decided to establish a web site there are three steps to 
getting it online. 


1 - Get a domain name - This is your personal/private address on the Web. 

2 - Find a web hosting service- Here is where your website will reside. 

ee vs Private Web Hosting 


Design, build and upload your website - The process of website 
eation. 
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Five step process for effective website design 


Analyse 

• Info / content 

• Target Audience 

• Top 10 Checklist 

Organise 

• Navigation 

• / Content 

•/ Page layout 

• Page design 

Develop 

• Web page layout 

• Site layout 

• Web page construction 

• Graphics techniques 


4. Implement 

• User Interaction 

• Final Checklist 

• FTP 

• Fine Tune 

5. Maintain 

• Marketing 

• Optimisation 

• Traffic analysis 
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Analyse 


The first question to ask yourself is do you really need a web site? To 

help you decide, ask yourself the following questions: 

Why do I want to create this web site? 

promote your ideas, hobbies, or beliefs 
• To advertise your company or product 
lake loads of money really fast 
Provide customer services and support 
To keep your customer base informed 
Give or sell information 

Create an 'Extended Business Card' for your company 
Provide internal information and services for your company 
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Analyse (1) Web Site Content 

Before you can start deciding what content the site is going to contain you neec 
to determine 

• Who your target audience is. 

m What age group are your users? 

What is there skill level with the Internet? 

How can I communicate effectively? 

• You also need to determine the purpose of your site. What is the site for? 

Once you have determined these factors you can start to plan the content your 
site will have. Remember who your target will be when deciding on content: 
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Analyse (2) 


2 - Who is my target audience? 

What type of visitors do I want my site to attract? What will be their age, 
sex and education? Will they search for my site because we share a 
hobby, like the same television shows or are they looking for specific 
information? 

3 - How can I communicate effectively? 

that I know who the audience will be, what is the best way to 
municate with them? 

- What information do I need? 

If you are designing a site for a client, you will need to know the answers 
to the proceeding questions as well as what their vision is for this site. Do 
they have a logo they want you to use, do they have specific colors in 
mind, do they want to include phone and fax numbers on their pages? If 
this is your own business site, these are questions you should answer 
also. 

Personal Site 
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Research WebSites 


This is a very important part in the creation of a web site, and usually very 
useful. 


Spend time looking at other internet sites, particularly your competitors 

See if you can get any ideas you can use and improve on 

Don't be mistaken that the flashiest coolest looking web site is the best. 

Sites with lots of animation are not always the best. 

You must also keep in mind that not everyone has a fast Internet connection. 
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Analyse (3) 


5 - What content (data, graphics, photos, etc.) will be included? 

This is the "big" job. ..gathering all the content that you want to include on your 
web site. Are you going to use photos? What kind of graphics do you want? And 
what information or data are you putting online? 

Make a list of the items you think you will want to have on your website. 


Audience analysis 

Audience analysis is the starting point for any project. You need to figure out your 
audi^ce's demographics: 

how old they are 

where they work 

what they earn 

where they live, anything that's appropriate 
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Analyse (4) 


Your content has to have a goal 

The key thing to remember about audience analysis is the goal: to have 
well-defined audience at the end of the process. The only good audience 
definition is a specific target definition. The better you can pigeon-hole or 
niche your audience, the more likely your site will succeed. 
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A checklist for type of Content you may wish to include on your website 



Frequently updated information 
Product and Company articles 
Question and answers 
Online purchasing of products 

Guest book that your guests to your site can sign and add their own 
comments 

Web site forum or chat room to generate conversation between your web 
site users 

Web site search -> very useful for larger sites 

Weekly poll, to poll your visitors on a particular question 

Quizzes and sweep stakes, with prizes to promote your products 

Free offers 

News 

Unique information 

Location maps 

Contact and Booking forms 
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Top 10 website design tips - checklist 

Know your audience 
Keep web pages short 
Limit the amount of text 
Avoid large images 
Use web safe colors 
learly identify all links 
Check spelling 

Use a site map or directory page 
Update and check all links 
10. Include contact information 
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Website Journal 


It is a good idea that you maintain some sort of journal for your website. Don't 
confuse a site journal with a site outline. Your journal is a collection of your 
ideas, your thoughts and whatever you want to remember, jot down ideas 
when they pop into your head. 

For starters pick out a website that impresses you and examine it; 
at is the color scheme and layout? 

How is navigation accomplished? 

What is the content? 

How is the content presented? 

rite down anything that you believe makes this website good and any ideas 
that you might want to use yourself. 
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Organisation 


Next to Analyse, organisation is one of the key tools to website design. 

We've discussed who you feel your audience will be and what kind of 
information they will be looking for and what questions they will be asking. Now 
we need to help them find the information and the answers hopefully, by the 
shortest route possible. 


e three main elements in the organization of a web site. They 

tructure: The form of your web site and its navigation 
Content: The substance of your web site 
Layout: The theme or method of presenting your web site 
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Organisation - Structure 


Now we're going to look at the overall 
design of a web site and "how to 
structure a website". This is different 
from the individual pages within the site 
(i.e. content). 

Site design includes the structure of 
your site, the different sections and 
navigation within those sections. It also 
encompasses the theme you choose. 


Home Page 

I 




Subsections 




As the diagram shows a web 
site is composed of three 
main areas: 

•The Home Page 

•The Main Sections 

•The Subsections 
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Organisation - Structure (1) 

HomePage Do’s 

Visitors first impressions 
m Should tell the visitors what your site is about 
• Answer questions on the 5 Ws 
m Should orovide index or table of contents 



m Keep the home page short and to the point 

Homepage don’ts 

Should not contain a lot of text 

Don’t present your users with a huge list of links to every single page 
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Organisation - Structure (2) 

Main Sections 

Determining and naming the main sections of your site is very important. 
Sections should contain material grouped according to visitor needs - in 
other words, these are sizeable chunks of related information. For example, 
if you are creating a site for a tourist visiting Dublin, you would want to make 
it easy for the visitor to find the right information. 

The main sections might include: 


Travel 

Restaurants 

Pubs 

Accommodation 


The/main section is your site index on your homepage, it is the foundation to 
your navigation of the website. 

Once you have divided your content into main sections, decide their order of 
importance 
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Organisation - Structure (2) 



Subsections 

Not all main sections necessarily need to have subsections, but 
most will require a further breakdown of information. It really 
depends on the amount of content on your site. When designing a 
new web site, keep in mind that the content will increase as you 
and add information to the site. Build in room to expand 
etermine your main and sub sections. 


ou have established the home page, main sections and subsections 
web site, organise them into order of importance and note it. This is 
basic layout of your web site. 
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Organisation - Navigation 



Now we need to help them find the user find the information and the 
answers to their questions and we hope we can do this by the shortest 
route possible 

There are three different navigation methods. 

Linear navigation - Moving in a straight line. 


Database navigation - Many branches from your main page. 


Hierarchical navigation - A completely connected website. 
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Linear Navigation 


Linear navigation is used for a web site where you want the visitor to go from 
one step to another in a particular order. This is usually used within a web 
site but seldom as a stand alone design. The idea here is that the visitor 
follows the pages in a predefined order or sequence that you determine. This 
is particularly useful for tutorials. 


Straight line or sequential links 


Linear "straight line" Navigation Diagram 


Arrange your links so that they only permit movement in a straight line from 
one page to another. This is straight line navigation. You set up your links in 
such a way as to compel the visitor to start at one end and continue to a 
conclusion. 
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Linear reciprocal links 


Linear "reciprocal" Navigation Diagram 


eciprocal navigation allows the visitor to move back and forth between a 
series of pages. Set-up your links with a start page an end page and links 
tying the pages together that lie between them. 
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Database Navigation 


Database Navigation 

The database or grid design is made up of multiple divisions and each division has 
its own structure. This type of navigation can be used effectively when large 
amounts of data are required in the web site design. 


Horn® 

{index page) 


Main divisions 
{sits index) 


Databases 

{inldmiauoh} 




Database Navigation Diagram 
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Hierarchical Navigation 

The hierarchical design goes from the general to the specific; from a home page to 
divisions to subdivisions. A visitor could easily go from the home page to other areas 
of the web site and back again. 


Home 
(index page) 


Ms in sections 
(a iie index) 


Subsections 

fn-avi-gaLi □ n bar) 


Detail sections 
(data b a sas) 



Hierarchical Navigation Diagram 
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The End 

Thank you for your time 


Dedicated to my people 

http://khanztuto.blogspot.com/ 

More Free Books & Handouts 
ttp://khanztuto.blogspot.my/2013/12/books-handouts.html 
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